<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>物品清单</span>
        <el-button class="fr" style="padding: 3px 0" type="text" @click="open">选择</el-button>
      </div>
      <el-table :data="dataList">
        <el-table-column label="编号" align="center" prop="pno"></el-table-column>
        <el-table-column label="名称" align="center" prop="name"></el-table-column>
        <el-table-column label="数量" align="center" prop="nums"></el-table-column>
        <el-table-column label="处置方式" align="center" >
          <template slot-scope="scope">
          <!--  <el-select v-model="scope.row.dealType">
              <el-option v-for="dict in (isTrailer == '0'?dict.type.wms_no_deal_type:dict.type.wms_deal_type)"
              :key="dict.value"  :label="dict.label" :value="dict.value" />
            </el-select> -->
            <el-select v-model="scope.row.dealType">
              <el-option v-for="dict in dict.type.deal_type"
              :key="dict.value"  :label="dict.label" :value="dict.value" />
            </el-select>
          </template>
        </el-table-column>

      </el-table>
    </el-card>
    <el-drawer :visible.sync="show" :before-close="handleClose" destroy-on-close size="70vw">
      <div class="mainDiv">
        <el-container class="main_container">
          <el-header>
            <p style="font-size: 22px;">物品列表</p>
          </el-header>
          <el-main>
            <el-row :gutter="20">
              <el-col :span="4" :xs="6">
                <div class="head-container">
                  <el-input v-model="classifyName" placeholder="请输入分类名称" clearable size="small" prefix-icon="el-icon-search" class="mb10" />
                </div>
                <div class="head-container">
                  <el-tree :data="classifyOptions" :props="defaultProps" :expand-on-click-node="false" accordion
                    :filter-node-method="filterNode" ref="tree" @node-click="handleNodeClick" />
                </div>
              </el-col>
              <el-col :span="20" :xs="18">
                <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
                  <el-form-item label="物品编号" prop="pno">
                    <el-input v-model="queryParams.pno" placeholder="请输入物品编号" clearable size="small"
                      @keyup.enter.native="handleQuery" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                  </el-form-item>
                </el-form>
                <el-table v-loading="loading" :data="propertyList" @selection-change="handleSelectionChange" border>
                  <el-table-column type="selection" width="55" align="center"/>
                  <el-table-column label="编号" align="center" prop="pno" min-width="240" fixed="left"/>
                  <el-table-column label="名称" align="center" prop="name"  min-width="180" fixed="left"/>
                  <el-table-column label="部门" align="center" prop="officeName" min-width="180"/>
                  <el-table-column label="仓库" align="center" prop="store" min-width="120"/>
                  <el-table-column label="库区" align="center" prop="area" min-width="180"/>
                  <el-table-column label="库位" align="center" prop="locator" min-width="180"/>
                  <el-table-column label="数量" align="center" prop="nums" width="80" />
                </el-table>
                <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList" />
              </el-col>
            </el-row>
          </el-main>
          <el-footer class="footerDivClass">
            <!-- <el-button  type="warning" @click="pack">打 包</el-button> -->
            <el-button :loading="buttonLoading" type="primary" @click="submit">确 定</el-button>
            <el-button   @click="handleClose">取 消</el-button>
          </el-footer>
        </el-container>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import {listProperty} from "@/api/oms/property"
  import {treeselect} from "@/api/oms/classify"
  export default {
    dicts:['wms_stock_status','wms_deal_type','wms_no_deal_type','deal_type'],
    props:{
      value:{
        type:[Array]
      },
      storeId:{
        type:String
      },
      isTrailer:{
        type:String
      }
    },
    data(){
      return{
        //弹窗显示
        show:false,
        //按钮遮罩
        buttonLoading:false,
        //分类数据
        classifyOptions:[],
        //库存数据
        propertyList:[],

        //选中数据
        dataList:[],

        classifyName:undefined,
        defaultProps: {
          children: "children",
          label: "label"
        },

        //遮罩层
        loading:true,
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          pno:undefined,
          classifyId:undefined,
          secondClassifyId:undefined,
          thirdClassifyId:undefined,
          status: '0',
          delFlag: '0'
        },
      }
    },
    watch:{
      value(val){
         this.dataList = val;
      },
      classifyName(val) {
        this.$refs.tree.filter(val);
      },
      storeId(val){
        this.queryParams.storeId = val;
        this.getList()
      },
    },
    methods:{
      open(){
        treeselect().then(response => {
          this.classifyOptions = response.data;
          this.getList();
          this.show = true;
        });
      },
      /** 查询库存数据 */
      getList(){
        this.loading = true;
        listProperty(this.queryParams).then(response=>{
          this.propertyList = response.rows;
          this.total = response.total;
          this.loading = false;
        })
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        if(data.weight == 0){
          this.queryParams.classifyId = data.id;
          this.queryParams.secondClassifyId = undefined;
          this.queryParams.thirdClassifyId = undefined;
        }
        if(data.weight == 1){
          this.queryParams.classifyId = undefined;
          this.queryParams.secondClassifyId = data.id;
          this.queryParams.thirdClassifyId = undefined;
        }
        if(data.weight == 2){
          this.queryParams.classifyId = undefined;
          this.queryParams.secondClassifyId = undefined;
          this.queryParams.thirdClassifyId = data.id;
        }
        this.handleQuery();
      },
      /** 多选框选中数据 */
      handleSelectionChange(selection){
        console.info('selection===>',selection)
        this.dataList = selection;
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams.classifyId = undefined;
        this.queryParams.secondClassifyId = undefined;
        this.queryParams.thirdClassifyId = undefined;
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },

      submit(){
        this.buttonLoading = true;
        this.handleClose();
        this.$emit('input',this.dataList);
      },
      pack(){

      },

      //关闭弹窗
      handleClose(){
        this.show = false;
        this.buttonLoading = false;
      },
    }
  }
</script>

<style>
</style>
